<template>
	<view class="container">
		<view class="top">
			<text class="iconfont icon-tixing-tianchong">
			</text>
			<button class="save-button" type="default" @tap="insertMessage">保存</button>
		</view>
		<input class="title-input" placeholder="标题" v-model="title"></input>
		<view class="select">
			<uni-data-select v-model="category" :localdata="range" placeholder="分类"></uni-data-select>
		</view>
		<view class="select2">
			<uni-data-select v-model="status" :localdata="range2" placeholder="状态"></uni-data-select>
		</view>
		<view class="meno">
			<textarea id="limited" rows="14" class="textarea" placeholder="开始书写" v-model="content" auto-height="true"></textarea>
		</view>
		<view class="bottom">
			<text class="iconfont icon-laji_huabanfuben" @tap="navigat"></text>
			<text class="iconfont icon-shipin"></text>
			<text class="iconfont icon-xiangce"></text>
			<text class="iconfont icon-luyin"></text>
		</view>
		<view class="tixing">
			<uni-datetime-picker>
			.
			</uni-datetime-picker>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'',
				content:'',
				category:'',
				status:'',
				range:[
					{ value:0, text:"旅行" },
					{ value:1, text:"学习" },
					{ value:2, text:"工作" },
					{ value:3, text:"购物" },
					{ value:4, text:"健康" },
					{ value:5, text:"无" }
				],
				range2:[
					{ value:0, text:"已完成" },
					{ value:1, text:"未完成" },
					{ value:2, text:"进行中" },
				],

			};
		},
		methods: {
			insertMessage(title, status, content, category) {
				uni.request({
					url:`http://localhost:8080/meno/insert?title=${this.title}&status=${this.status}
					&content=${this.content}&category=${this.category}`,
					method:"GET",
					success: (res) => {
						console.log(res.data);
						if(res.data ==1) {
							uni.reLaunch({
								url:"/pages/index/index"
							})
						}
					}
				})
			},
			navigat() {
				uni.navigateTo({
					url:"/pages/index/index"//按页面获取
				});
			}
		}
	}
</script>

<style lang="scss">
	@import'../../common/icon.css';
	.top {
		display: flex;
		align-items: center;
		padding: 0 14px;
	}
	.icon-tixing-tianchong {
		font-size: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 35px;
		right: 110px;
		margin: 0 auto;
		width: 50px;
		height: 50px;
	}
	page{
		background-color: #ffe1af;
	}
	.save-button {
		display: flex;
		justify-content: center;
		font-size: 14px;
		width: 60px;
		height: 30px;
		align-items: center;
		padding: 0px;
		background-color: #cba43f;
		color: white;
		border: none;
		border-radius: 5px;
		margin-right: 10px;
	}
	.title-input {
		  display: flex;
		  align-items: center;
		  font-size: 30px;
		  color: black;
		  padding: 10px;
		  border-bottom: 2px solid #eeeeee;
	}
	.select {
		display: flex;
		justify-content: center;
		font-size: 14px;
		width: 80px;
		height: 30px;
		align-items: center;
		padding: 1px;
		border: 0px;
		border-radius: 5px;
		margin-left: 10px;
		box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.2);
	}
	.select2 {
		display: flex;
		justify-content: center;
		font-size: 14px;
		width: 80px;
		height: 30px;
		align-items: center;
		padding: 1px;
		border: 0px;
		border-radius: 5px;
		margin-left: 280px;
		margin-top: -32px;
		box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.2);
	}
	.meno {
		display: flex;
		flex: 1;
		padding: 25px;
	}
	.textarea {
		position: relative;
		top: 20px;
		font-size: 20px;
		width: 100%;
		resize: none;
	}
	.bottom {
		border-top: 2px solid #eeeeee;
		// display: flex;
		position: absolute;
		bottom: 20px;
		flex-shrink: 0;
		font-size: 40px;
	}
	.icon-laji_huabanfuben {
		font-size: 25px;
		padding: 0 35px;
	}
	.icon-shipin{
		font-size: 25px;
		padding: 0 35px;
	}
	.icon-xiangce{
		font-size: 25px;
		padding: 0 35px;
	}
	.icon-luyin{
		font-size: 25px;
		padding: 0 35px;
	}
	.tixing{
		display: flex;
		align-items: center;
		align-items: center;
		position: fixed;
		top: 35px;
		right: 90px;
		margin: 0 auto;
		width: 50px;
		height: 50px;
	}
</style>